<template>
    <div id="app">
      <div class="main-container">
        <div class="content-panel">
          <!-- 好友栏区域 -->
          <div class="friends-panel">
            <h2 class="section-title">好友列表</h2>
            <ul class="friend-list">
              <li 
                v-for="friend in friends" 
                :key="friend.id" 
                class="friend-item"
                :class="{ active: friend.id === currentFriend.id }"
                @click="currentFriend = friend"
              >
                <img 
                  :src="friend.avatar" 
                  alt="好友头像" 
                  class="friend-avatar" 
                  @error="handleImageError"
                />
                <span class="friend-name">{{ friend.name }}</span>
              </li>
            </ul>
          </div>
  
          <!-- 聊天栏区域 -->
          <div class="chat-panel">
            <h2 class="section-title">与 {{ currentFriend.name }} 的聊天</h2>
            <div ref="chatWindow" class="chat-window">
              <div 
                v-for="(message, index) in currentFriend.messages" 
                :key="index" 
                class="message-item"
              >
                <img 
                  :src="message.avatar" 
                  alt="用户头像" 
                  class="avatar" 
                  @error="handleImageError" 
                />
                <p class="message-content">{{ message.content }}</p>
              </div>
            </div>
  
            <div class="input-area">
              <input
                v-model="newMessage"
                type="text"
                placeholder="输入消息..."
                class="input"
                @keyup.enter="sendMessage"
              />
              <button @click="sendMessage" class="send-btn">发送</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, nextTick } from 'vue';
  import defaultAvatar from '@/assets/images/default-avatar.jpg';
  // 好友列表数据（包含4个好友）
  const friends = ref([
    { 
      id: 1,
      name: "小明",
      avatar: "https://picsum.photos/200/200",
      messages: [
        { avatar: "https://picsum.photos/200/200", content: "你好！这个笔记本的尺寸是多少？" },
        { avatar: userAvatar, content: "14英寸的，具体参数可以看商品详情页哦~" }
      ]
    },
    { 
      id: 2,
      name: "小红",
      avatar: "https://picsum.photos/201/201",
      messages: [
        { avatar: "https://picsum.photos/201/201", content: "这周末一起去集市吗？" },
        { avatar: userAvatar, content: "好呀，我正好有闲置物品要卖~" }
      ]
    },
    { 
      id: 3,
      name: "小刚",
      avatar: "https://picsum.photos/202/202",
      messages: [
        { avatar: "https://picsum.photos/202/202", content: "你的二手书还有吗？" },
        { avatar: userAvatar, content: "还有3本，需要的话我给你留一本~" }
      ]
    },
    { 
      id: 4,
      name: "小慧",
      avatar: "https://picsum.photos/203/203",
      messages: [
        { avatar: "https://picsum.photos/203/203", content: "上次说的台灯还在吗？" },
        { avatar: userAvatar, content: "还在的，晚上6点后可以来宿舍取~" }
      ]
    }
  ]);
  
  // 当前选中好友（默认选中第一个）
  const currentFriend = ref(friends.value[0]);
  
  // 聊天输入内容
  const newMessage = ref('');
  // 当前用户头像（可替换为真实用户头像）
  const userAvatar = "https://picsum.photos/200/200"; 
  // 聊天窗口DOM引用
  const chatWindow = ref(null);
  
  // 发送消息逻辑
  const sendMessage = async () => {
    if (newMessage.value.trim()) {
      // 向当前好友的消息列表添加新消息（当前用户头像+内容）
      currentFriend.value.messages.push({ 
        avatar: userAvatar, 
        content: newMessage.value 
      });
      newMessage.value = ''; // 清空输入框
      await nextTick(); // 等待DOM更新
      // 滚动到最新消息
      chatWindow.value.scrollTop = chatWindow.value.scrollHeight;
    }
  };
  
  // 图片加载失败处理
  const handleImageError = (event) => {
    event.target.src = defaultAvatar; // 本地默认头像路径
    event.target.alt = '默认头像';
  };
  </script>
  
  <style scoped>
  /* ------------------------------
     全局基础样式
  ------------------------------ */
  #app {
    min-height: 100vh;
    background-color: #eaedf1;
  }
  
  .main-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 24px 16px;
  }
  
  .main-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 24px;
    padding-left: 12px;
  }
  
  /* ------------------------------
     内容面板布局
  ------------------------------ */
  .content-panel {
    display: flex;
    gap: 24px;
    background: #fdfdfd;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    padding: 24px;
    height: calc(100vh - 160px); /* 适应视口高度 */
    min-height: 600px;
  }
  
  /* ------------------------------
     好友栏样式
  ------------------------------ */
  .friends-panel {
    flex: 0 0 280px; /* 固定宽度280px */
    border-right: 1px solid #e8e8e8;
    padding-right: 24px;
  }
  
  .friend-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .friend-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
  }
  
  .friend-item:hover {
    background-color: #f5f7fa;
  }
  
  .friend-item.active {
    background-color: #e6f4ff;
    border-left: 2px solid #1890ff;
  }
  
  .friend-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #e1e4e7;
    object-fit: cover;
  }
  
  .friend-name {
    color: #1a1a1a;
    font-size: 0.95rem;
    flex: 1;
  }
  
  /* ------------------------------
     聊天栏样式
  ------------------------------ */
  .chat-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  
  .chat-window {
    flex: 1; /* 自动占满剩余空间 */
    border-radius: 8px;
    background-color: #f8f9fa;
    padding: 16px;
    margin-bottom: 20px;
    overflow-y: auto; /* 滚动条 */
  }
  
  .message-item {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
  }
  
  .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #e1e4e7;
    object-fit: cover;
  }
  
  .message-content {
    background-color: #ffffff;
    border: 1px solid #e8e8e8;
    padding: 10px 14px;
    border-radius: 6px;
    max-width: 70%;
    word-wrap: break-word; /* 长文本换行 */
  }
  
  /* ------------------------------
     输入区样式
  ------------------------------ */
  .input-area {
    display: flex;
    gap: 12px;
  }
  
  .input {
    flex: 1;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 0.95rem;
    transition: all 0.2s;
  }
  
  .input:focus {
    outline: none;
    border-color: #1890ff;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
  }
  
  .send-btn {
    background-color: #1890ff;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0 24px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
  }
  
  .send-btn:hover {
    background-color: #40a9ff;
  }
  </style>